<template>
    <div class="example-wrapper">
        <div class="title">
            {{ title }}
        </div>
        <a-row class="content">
            <a-col><slot /></a-col>
        </a-row>
        <div v-if="tips" class="tips">
            <div>Tips:</div>
            <div v-html="tips" />
        </div>
    </div>
</template>

<script>
export default {
    name: 'Example',
    props: {
        title: {
            type: String,
            default: ''
        },
        tips: {
            type: String,
            default: ''
        }
    }
};
</script>
<style  lang="less" scoped>
.example-wrapper {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 20px;

    &:hover {
        box-shadow: 0px 0px 5px #eee;
    }

    >.title {
        font-weight: 700;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
        background-color: #eee;
    }
    >.content {
        padding: 20px;
        background-color: #f8f8f8;
    }
    >.tips {
        padding: 20px;
        border-top: 1px solid #eee;
    }
}

</style>
